<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" labelWidth="100" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <div>
      <FilterTable
        ref="table"
        :isSelectColumn="true"
        :columns="columns"
        :fetchapi="fetchApi"
        :params="fetchParams"
        :datakey="'rows'"
        selectionType="single"
        :onColumnsChange="columns => (this.columns = columns)"
        :onSyncTableData="tableHandle"
        columnsRef="partInventoryManagerAttachUpdateIndex"
        :onRowSelectChange="selectChangeHandle"
      ></FilterTable>
      <!-- <FilterTable
        ref="table"
        columnsRef="lxxInStorage"
        :columns="columnst"
        :params="fetchParams"
        :datakey="'rows'"
        selectionType="single"
        :onColumnsChange="columns => (this.columns = columns)"
        :onSyncTableData="tableHandle"
        :onRowSelectChange="selectChangeHandle"
      ></FilterTable>-->
    </div>

    <BaseDialog :visible.sync="visible" :title="dialogTitle" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <AttachUpdateItem :partNo="partNo" @close="visible = false" />
    </BaseDialog>
  </div>
</template>
<script>
import { getInStorageList, deleteRecevingBill } from '@/api/tool/business/inStorage';
import { getSapPartLogList, getSapPartLogItemList } from '@/api/part/inventoryManager/attachUpdate';
import AttachUpdateItem from '@/pages/part/inventoryManager/attachUpdate/attachUpdateItem';
export default {
  name: 'InStorage',
  components: { AttachUpdateItem },
  mixins: [],
  data() {
    return {
      topFilterList: this.createTopFilters(),
      fetchParams: { xhrAbort: true },
      dialogTitle: '配件更新情况',
      columns: this.createTableColumns(),
      columnst: this.createTableColumnst(),
      handleType: '',
      formData: {},
      fetchApi: getSapPartLogList,
      tableData: [], // 表单数据
      recevingId: '',
      visible: false,
      partNo: ''
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  created() {
    // this.$refs.table.doLayout();
  },
  methods: {
    // 点击详情触发
    async clickHandle(val) {
      this.partNo = val.matnr;
      this.visible = true;
    },
    // 搜索条件变化触发
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
      this.fetchParams = { ...this.fetchParams };
    },
    selectChangeHandle() {},
    createTopFilters() {
      return [
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'matnr',
          placeholder: '配件代码...'
        },
        {
          type: 'RANGE_DATE',
          label: '下发时间',
          dateType: 'daterange',
          // style: { minWidth: '280px' },
          fieldName: 'dBegin|dEnd'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.clickHandle(props.row)}>
                  详情
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 100,
          sorter: true,
          // filter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '配件代码',
          dataIndex: 'matnr',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配件名称',
          dataIndex: 'partName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '更新日期',
          dataIndex: 'updateDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range'
          // editable: true,
          // editType: 'date-picker'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          width: 150,
          dateFormat: 'HH-mm-ss',
          sorter: true,
          filter: true,
          filterType: 'date-range'
          // editable: true,
          // editType: 'date-picker'
        }
      ];
    },
    createTableColumnst() {
      return [
        {
          title: '配件代码',
          dataIndex: 'vBillNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '更新状态(I:新件 D:删除)',
          dataIndex: 'nSupplierCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '更新日期',
          dataIndex: 'updateDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          editable: true,
          editType: 'date-picker'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          width: 150,
          dateFormat: 'yyyy-MM-dd',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          editable: true,
          editType: 'date-picker'
        }
      ];
    },
    // table动态回调函数
    tableHandle(val) {
      this.tableData = val;
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    closeHandler(val, type) {
      this.visible = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }
  }
};
</script>

<style scoped></style>
